<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<style>
    #searchOptionTb{display: none;}
</style>
<script>
    var buttons = $.extend([], $.fn.datebox.defaults.buttons);
    buttons.splice(1, 0, {
        text: '清空',
        handler: function (target) {
            $(target).datebox('setValue', '').datebox('hidePanel');
        }
    });
</script>
<table id="searchgrid" class="topjui-datagrid"></table>

<div id="searchOptionTb">
    <form id="option_form">
        <input id="searchOptionbox" name="projectname" class="selectp" autocomplete="off" placeholder="请输入查询条件"  style="width:180px;height: 24px;">
    </form>
</div>
<form id="customerform" method="post" style="padding-top:1px">
    <input type="hidden" name="id">
    <table style="margin:6px; width: 98%">
        <tr style="height: 30px">
            <td class="label" width="126px" style="text-align: right">配电房名称：</td>
            <td>
                <input type="text" name="boardname" autocomplete="off" class="selectp" data-options="required:true" style="width:350px;height: 24px;">
            </td>
            <td class="label" width="126px" style="text-align: right">用户电压登记：</td>
            <td>
                <input type="text" name="voltmark" autocomplete="off" class="selectp" data-options="required:true" style="width:350px;height: 24px;">
            </td>
        </tr>
        <tr style="height: 30px">
            <td class="label" width="126px" style="text-align: right">容量：</td>
            <td>
                <input type="text" name="volume" autocomplete="off" class="selectp" data-options="required:true" style="width:350px;height: 24px;">
            </td>
            <td class="label" width="126px" style="text-align: right">用户名称：</td>
            <td>
                <input type="text" name="username" autocomplete="off" class="selectp" data-options="required:true" style="width:350px;height: 24px;">
            </td>
        </tr>
        <tr style="height: 30px">
            <td class="label" width="126px" style="text-align: right">用户类型：</td>
            <td>
                <input type="text" name="usertype" autocomplete="off" class="selectp" data-options="required:true" style="width:350px;height: 24px;">
            </td>
            <td class="label" width="126px" style="text-align: right">所属项目：</td>
            <td>
                <input type="hidden" id="projectcode" name="projectcode">
                <input type="hidden" id="factoryname" name="factoryname">
                <input type="hidden" id="factoryuser" name="factoryuser">
                <input type="hidden" id="factoryphone" name="factoryphone">
                <input type="hidden" class="easyui-validatebox" id="projectid"  name="projectid" value="0" >
                <input class="selectp"  type="text" name="projectname" data-options="required:true" id="form-projectname" style="width: 350px;height: 24px">
            </td>
        </tr>

        <tr style="height: 30px">

            <td class="label" width="126px" style="text-align: right">所属巡视单位：</td>
            <td>
                <input type="hidden" class="easyui-validatebox" data-options="required:true" id="form-routerid" name="routerid" value="0" >
                <input class="selectp"  type="text" name="routername" id="form-routername" style="width: 350px; height: 24px">
            </td>
            <td class="label"  width="126px" style="text-align: right">状态：</td>
            <td>
                <select name="status" style="width: 378px;height: 24px" class="selectp">
                    <option value="1">正常</option>
                    <option value='0'>禁用</option>
                </select>
            </td>
        </tr>
        <tr style="height: 30px">
            <td class="label" width="126px" style="text-align: right">托管日期：</td>
            <td>
                <input id="tg-checktime" type="text" name="tgtime"  class="selectp" data-options="required:true" style="width:350px;height: 24px;">
            </td>
            <td class="label" width="126px" style="text-align: right">结束日期：</td>
            <td>
                <input id="form-stoptime" type="text" name="stoptime"  class="selectp" data-options="required:true" style="width:350px;height: 24px;">
            </td>
        </tr>
        <tr style="height: 30px">
            <td class="label" width="126px" style="text-align: right">红外测温：</td>
            <td>
                <input id="form-hwcwtime" type="text" name="hwcwtime"  class="selectp" style="width:350px;height: 24px;">
            </td>
            <td class="label" width="126px" style="text-align: right">开关核对：</td>
            <td>
                <input id="form-kghdtime" type="text" name="kghdtime"  class="selectp" style="width:350px;height: 24px;">
            </td>
        </tr>
        <tr style="height: 30px">
            <td class="label" width="126px" style="text-align: right">设备清扫：</td>
            <td>
                <input id="form-sbqstime" type="text" name="sbqstime"  class="selectp" style="width:350px;height: 24px;">
            </td>
            <td class="label" width="126px" style="text-align: right">环境清扫：</td>
            <td>
                <input id="form-hjqstime" type="text" name="hjqstime"  class="selectp" style="width:350px;height: 24px;">
            </td>
        </tr>
        <tr style="height: 30px">
            <td class="label" width="126px" style="text-align: right">巡检日期：</td>
            <td>
                <input id="form-checktime" type="text" name="checktime"  class="selectp" style="width:350px;height: 24px;">
            </td>
            <td class="label" width="126px" style="text-align: right">&nbsp;</td>
            <td>
                &nbsp;
            </td>
        </tr>
    </table>
</form>
<script type="text/javascript" charset="utf-8" th:inline="none">
    var searchgrid;
    $(function(){
        searchgrid = $('#searchgrid').datagrid({
            url:"/project/list",
            method:'get',
            fit : false,
            fitColumns : true,
            border : false,
            pagination : true,
            idField : 'id',
            pageSize : 10,
            pageList : [ 10,20 ],
            sortName : 'id',
            sortOrder : 'desc',
            singleSelect: true,
            checkOnSelect : true,
            selectOnCheck : true,
            nowrap : false,
            columns:[[
                {
                    field:'id',
                    title:'编号',
                    width:50,
                    checkbox : true
                }, {
                    field:'projectname',
                    title:'项目名称',
                    width:100
                }, {
                    field:'projectcode',
                    title:'项目编码',
                    width:40
                }, {
                    field:'projectuser',
                    title:'经办人',
                    width:40
                },{
                    field:'money',
                    title:'合同金额',
                    width:40
                }, {
                    field:'factoryname',
                    title:'单位名称',
                    width:60
                }, {
                    field:'factoryuser',
                    title:'单位联系人',
                    width:60
                },{
                    field:'factoryphone',
                    title:'单位联系方式',
                    width:60
                },{
                    field:'starttime',
                    title:'签订日期',
                    sortable:true,
                    width:40
                }
            ]],
            toolbar:[{
                text:document.getElementById('searchOptionTb').innerHTML
            },{
                text:'查询',
                iconCls : 'fa fa-search',
                height: '24px',
                handler : function() {
                    search_search();
                }
            }],
            onClickRow :function(rowIndex,rowData){
                search_editFun(rowData.id);
            }
        });

        $('#form-routername').combobox({
            width: 350,
            height: 32,
            valueField: 'id',
            textField: 'name',
            style: "width:350px;height:24px;",
            cls: 'selectp',
            panelWidth: 350,
            hasDownArrow: true,
            url: '/router/all',
            required: true,
            onSelect: function (data) {
                $("#form-routerid").val(data.id);
                $("input[name='routername']").val(data.name);

            }
        });
        $(".combo-text").removeAttr("style");
        $(".combo-text").attr("style", "width:350px;height:24px;line-height:24px");
        $(".combo-text").addClass("selectp");
        $(".combo-arrow").attr("style", "margin-left: -20px;margin-top: 3px;background-color:rgba(0,0,0,0)");
        $(".combo-panel").attr("style", "margin-top:0px;");

        //日期样式
        $('#form-checktime').datebox({
            required: true,
            formatter: function (date) {

                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                var d = date.getDate();
                return y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d);

            }
        });
        //日期样式
        $('#tg-checktime').datebox({
            required: true,
            formatter: function (date) {
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                var d = date.getDate();
                return y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d);
            }
        });

        //日期样式
        $('#form-stoptime').datebox({
            required: true,
            formatter: function (date) {
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                var d = date.getDate();
                return y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d);
            }
        });

        //日期样式
        $('#form-hwcwtime').datebox({
            buttons:buttons,
            formatter: function (date) {
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                var d = date.getDate();
                return y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d);
            }
        });
        //日期样式
        $('#form-kghdtime').datebox({
            buttons:buttons,
            formatter: function (date) {
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                var d = date.getDate();
                return y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d);
            }
        });

        //日期样式
        $('#form-sbqstime').datebox({
            buttons:buttons,
            formatter: function (date) {
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                var d = date.getDate();
                return y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d);
            }
        });

        //日期样式
        $('#form-hjqstime').datebox({
            buttons:buttons,
            formatter: function (date) {
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                var d = date.getDate();
                return y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d);
            }
        });
        $(".combo-text").removeAttr("style");
        $(".combo-text").attr("style", "width:350px;height:24px;line-height:24px");
        $(".combo-text").addClass("selectp");
        $(".combo-arrow").attr("style", "margin-left: -20px;margin-top: 3px;background-color:rgba(0,0,0,0)");
        $(".combo-panel").attr("style", "margin-top:0px;");
    });

    function search_editFun(id) {
        var index = searchgrid.datagrid('getRowIndex', id);
        var rows = searchgrid.datagrid('getRows');
        var o = rows[index];
        //$('#customerform').form('load', o);
        $('#projectid').val(id);
        $('#projectcode').val(o.projectcode);
        $('#factoryname').val(o.factoryname);
        $('#factoryuser').val(o.factoryname);
        $('#factoryphone').val(o.factoryphone);
        $('#form-projectname').val(o.projectname);
    }


    function search_search(){
        var param = form2Json("option_form");
        $('#option_form').form('submit', {
            url : '/project/list',
            onSubmit:function(){
                return true;
            },
            success : function(result) {
                try {
                    var r = $.parseJSON(result);
                    searchgrid.datagrid({
                        url:'/project/list',
                        pagination : true,
                        idField : 'id',
                        pageSize : 10,
                        pageList : [ 10,20 ],
                        sortName : 'id',
                        sortOrder : 'desc',
                        queryParams: param,　　//关键之处
                        data:r
                    });

                } catch (e) {
                    $.messager.alert('提示', result);
                }
            }
        });
    }
</script>
</html>